<template>
	<div class="back">
		<div class="box">
			<!-- 导航按钮 -->
			<navs></navs>

			<!-- 歌手列表 -->
			<!-- <div class="list"> -->
			<!-- <van-index-bar :index-list="leftList"> -->
			<div v-for="(item, index) in rightList" :key="index">
				<!-- 索引标题 -->
				<!-- 	<van-index-anchor :index="item.name" />
					<van-cell v-for="value in item.data" :key="value.id" class="list"> -->
				<!-- 使用 title 插槽来自定义标题 -->
				<!-- <template #title> -->
				<!-- <div class="van-cell"> -->
				<!-- <router-link tag="div" :to="'/singer/artists?id=' + item.id" class="van-cell-title"> -->
				<div class="van-cell-title">
					<img width="45" height="45" :src="item.SImg" />
					<span class="custom-title">{{ item.SName }}</span>
					<div @click="$router.push('/index/singer')">
						<div class="crad1" style="position: absolute;right: 10%;" v-show="item.change==false">
							<button class="attention" @click="liked(item.id)"
								style="background: transparent;border: solid 1px #FFFFFF;color: #FFFFFF;border-radius: 8px;text-align: center;padding: 2px 4px 2px 4px;font-size: 10px;">关注</button>
						</div>
						<div class="card" v-show="item.change==true">
							<button class="attention" @click="delliked(item.id)">已关注</button>
						</div>
					</div>

				</div>
				<!-- 	</router-link :to="'/mvplay/mvplay?id=' + item.id> -->

				<!-- </div> -->
				<!-- </template>
					</van-cell> -->
			</div>
			<!-- 			</van-index-bar> -->
			<!-- </div> -->

		</div>
	</div>
</template>

<script>
	import {
		getArtistlist,
		selectArtisthgz,
		getSliked,
		deletSliked
	} from "../api/singer";
	import navs from "../components/base/navs.vue";
	export default {
		components: {
			navs
		},
		data() {
			return {
				rightList: [],
				change: false,
				userid: null

			};
		},
		methods: {
			liked(type) {
				// let index = this.playerId.findIndex(item=>item.)
				getSliked({
					Sid: type,
					Uid: this.userid
				}).then((data) => {
					console.log(this.rightList[type-1].change);
					this.rightList[type-1].change = true
				});
			},
			delliked(type) {
				// let index = this.playerId.findIndex(item=>item.)
				deletSliked({
					Sid: type,
					Uid: this.userid
				}).then((data) => {
					console.log(this.rightList[type-1].change);
					this.rightList[type-1].change = false
				});
			},

		},
		async created() {
			await getArtistlist({
				page: 1,
				limit: 100000,
				id: -1,
				SName: ""
			}).then((data) => {
				this.rightList = data.data
				console.log(this.rightList);
				this.userid = window.localStorage.getItem("uid")
				for (let i = 0; i < this.rightList.length; i++) {
					selectArtisthgz({
						Uid: this.userid,
						Sid: this.rightList[i].id
					}).then((data) => {
						if (data.code == 0) {
							this.change = true;
							this.$set(this.rightList[i], "change", this.change);
						} else {
							this.change = false;
							this.$set(this.rightList[i], "change", this.change);
						}
					});
				}
			});
			// 	this.ArtistlistFun(); //构建对象

			// 	for (let i = 0; i < this.leftList.length; i++) {
			// 		await getArtistlist({
			// 			type: 1, // 歌手类型
			// 			area: 96, // 歌手地区
			// 			initial: this.leftList[i], //返回数量 , 默认为 30
			// 		}).then((data) => {
			// 			console.log(data);

			// 			let index = this.rightList.findIndex(
			// 				(item) => item.name == this.leftList[i]
			// 			);
			// 			// Vue.set( target, propertyName/index, value )
			// 			//   向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
			// 			// this.rightList[index].data = data.artists; //不合理写法
			// 			this.$set(this.rightList[index], "data", data.artists);

			// 			console.log(this.rightList);
			// 		});
			// 	}
			// 	// this.$emit("get-style");
		},


	};
</script>

<style lang="less">
	.back {
		background-color: #0F172A;
		color: #FFFFFF;
		// active-color:"#007AFF";
	}

	// .active{
	// 	color: #243DE2;
	// }
	.box {
		// padding-bottom: 100px;
		margin: auto;
		padding: auto;

		// background-color: #0F172A;
		img {
			border-radius: 30px;
		}

		// view .list {
		// 	background-color: #0F172A;
		// 	color: #EEEEEE;
		// }
		.van-cell {
			background-color: #0F172A;
			position: relative;
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 16px;
			overflow: hidden;
			// color: #FFFFFF;
			font-size: 14px;
			line-height: 24px;
		}

		.van-cell-title {
			display: flex;
			align-items: center;
			margin: 6px;
			padding: 4px;
			background-color: #292D39;
			color: #EEEEEE;
			border-radius: 10px;

			.card {
				position: absolute;
				right: 10%;

				.attention {

					background: transparent;
					border: solid 1px #FFFFFF;
					color: #FFFFFF;
					border-radius: 8px;
					text-align: center;
					padding: 2px 4px 2px 4px;
					font-size: 10px;
				}
			}

			.card1 {
				position: absolute;
				right: 10%;

				.attention {

					background: transparent;
					border: solid 1px #FFFFFF;
					color: #FFFFFF;
					border-radius: 8px;
					text-align: center;
					padding: 2px 4px 2px 4px;
					font-size: 10px;
				}


			}


			span {
				margin-left: 20px;
			}
		}

		.van-index-anchor {
			background-color: #0F172A;
			color: #EEEEEE;
		}
	}
</style>
